<template>
	<view class="page">
		<view class="segmented-control-wrap">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style="font-size: 16px;"
				:activeColor="baseColor" />
		</view>
		<view style="overflow-y: overflow;">
			<!-- 闹钟设置 -->
			<view v-if="current === 0">
				<view class="alarm-card-wrap">
					<!-- 删除闹钟弹窗 -->
					<u-modal :show="showDelete" @confirm="deleteAlarm()" @cancel="showDelete=false" title="确认删除该闹钟吗?"
						:showCancelButton="true" :content="deleteMessage"></u-modal>
					<!-- 闹钟列表 -->
					<uni-card v-for="alarm in alarmList" :key="alarm.id" class="alarm-card"
						@longpress.native="showDeleteAlarm(alarm)">
						<view class="card-content">
							<picker mode="time" :value="alarm.tm" start="00:00" end="23:59"
								@change="bindTimeChange($event, alarm.id)">
								<view class="time-container">
									<!-- <p class="time" :style="getTimeStyle(alarm.isActive)">{{ alarm.tm }}</p> -->
									<text class="time" :style="{color:alarm.isActive? '#090909' : '#a6a6a6'}">
										{{ alarm.formatTime }}
									</text>
									<text class="time"
										:style="{fontSize:'18px',color:alarm.isActive? '#090909' : '#a6a6a6',marginLeft:'10px'}">{{alarm.timeRange}}</text>
								</view>
							</picker>
							<view>
								<view>
									<u-switch v-model="alarm.isActive" size="25" :activeColor="baseColor"
										@change="alarmSwitch(alarm)">
									</u-switch>
								</view>
							</view>
						</view>

						<!-- <view class="day-list">
														{{ formatDayList(alarm.dayList) }}
						</view> -->

					</uni-card>
				</view>
				<button class="fixed-button" :style="{'background-color':baseColor}" @click="navigateToAddClock">
					<uni-icons size="30" color="#ffffff" type="plusempty" name="add"></uni-icons>
				</button>
			</view>
			<!-- 药品设置 -->
			<view v-if="current === 1" class="pill-setup">
				<!-- 装药格子数 -->
				<NumberBox :data="totalLoad" @totalLoadChange="totalLoadChange" :backGroundColor="tintColor">
				</NumberBox>
				<u-divider></u-divider>
				<!-- 剩余格子数 -->
				<NumberBox :data="surplusCnt" @surplusCntChange="surplusCntChange" :backGroundColor="tintColor">
				</NumberBox>
				<u-divider></u-divider>
				<!-- 补药提醒周期 -->
				<NumberBox :data="alertCycle" @alertCycleChange="alertCycleChange" :backGroundColor="tintColor">
				</NumberBox>
				<u-divider></u-divider>
				<!-- 响铃持续时间 -->
				<NumberBox :data="ringTime" @ringTimeChange="ringTimeChange" :backGroundColor="tintColor"></NumberBox>
				<u-divider></u-divider>
				<!-- 超时提醒时间 -->
				<NumberBox :data="overtimeNotice" @overtimeNoticeChange="overtimeNoticeChange"
					:backGroundColor="tintColor"></NumberBox>
				<!-- 				<view class="switch-card">
					<text>补药提醒周期</text>
					<picker @change="alertCycleChange" :value="alertCycleIndex" :range="alertCycleArr">
						<view style="font-size:15px;color:#777;">{{alertCycleArr[alertCycleIndex]}}</view>
					</picker>
				</view> -->
			</view>
			<!-- 其他设置 -->
			<view v-if="current === 2">
				<!-- 				<view class="u-demo-block">
					<text class="u-demo-block__title" style="font-size: 15px;">铃声大小</text>
					<view class="u-page__slide-item">
						<u-slider v-model="bellVal" showValue min="0" max="3" @change="bellChange" block-color="red">
						</u-slider>
					</view>
				</view>
				 -->
				<!-- 铃声设置 -->
				<view class="settings">
					<view class="setting-bell">
						<text class="setting-title">铃声音量
							<!-- 						<text
								style="color:#777;padding-left:10px;">{{bellVal}}</text> -->
						</text>
						<view class="u-page__slide-item">
							<slider :value="bellVal" min="0" max="3" step="1" @change="bellChange" block-color="#fff"
								block-size="16" :activeColor="baseColorLight">
							</slider>
						</view>
					</view>
					<!-- 铃声模式 -->
					<view class="switch-card">
						<text>铃声模式</text>
						<picker @change="ringTypeChange" :value="ringIndex" :range="ringTypes">
							<view style="font-size:15px;color:#777;">{{ringTypes[ringIndex]}}</view>
						</picker>
					</view>
					<!-- 时间格式 -->
					<view class="switch-card">
						<text>使用12小时制时间格式</text>
						<u-switch v-model="useTime12" @change="changeTimeFormat()" :activeColor="baseColor" />
					</view>
					<!-- 微信推送 -->
					<view class="switch-card">
						<text>通过微信推送药物漏服提醒</text>
						<u-switch v-model="subscribeOvertime" @change="toggleSubscribe()" :activeColor="baseColor" />
					</view>
					<!-- 重启设备 -->
					<view class="switch-card" style="justify-content: center;" hover-class="pressed">
						<text style="color:#2C71EB;" @click="showReboot=true">重启设备</text>
					</view>
					<!-- 恢复出产设置 -->
					<view class="switch-card" style="justify-content: center;" hover-class="pressed">
						<text style="color:red;" @click="showFactoryReset=true">恢复出产设置</text>
					</view>
					<!-- 重启设备 确认框 -->
					<u-modal :show="showReboot" title="确认重启智能药盒吗?" content='' showCancelButton
						@cancel="showReboot=false" @confirm="rebootDevice"></u-modal>
					<!-- 恢复出产设置 确认框 -->
					<u-modal :show="showFactoryReset" title="确认清除数据并恢复出产设置吗?" content='' showCancelButton
						@cancel="showFactoryReset=false" @confirm="factoryReset" confirmColor="red"></u-modal>
				</view>

			</view>
		</view>
		<!-- 等待动画 -->
		<!-- 		<u-modal :show="showloading" @cancel="showloading=false" showCancelButton :showConfirmButton="false"
			cancelText="关闭" width="200px">
			<u-loading-icon text="等待设备响应中..." textSize="16" size="50" vertical></u-loading-icon>
		</u-modal> -->
	</view>
</template>

<script>
	import NumberBox from "@/pages/common/NumberBox/index.vue";
	import {
		getAllAlarm,
		setPillBox,
		getPillBoxInfo,
		delPillBox,
		subscribeOvertimeNotice,
		getOpenID,
		factoryResetPillBox,
	} from "./api/pillbox.js";
	export default {
		components: {
			NumberBox,
		},
		data() {
			return {
				// 基础蓝配色
				// baseColor: "#007BFF",
				baseColor: "#2979ff",
				baseColorLight: '#1988ff',
				tintColor: '#edf6ff',
				// 老人id
				elderUUID: '',
				// 设备主题 topic
				deviceTopic: 'P38:862170067052843',
				// 删除提示
				deleteMessage: '',
				// 显示删除界面
				showDelete: false,
				// 正在删除的闹钟的信息
				deletedAlarm: {},
				items: ['闹钟列表', '药盒设置', '其他设置'],
				current: 0,
				// 闹钟集合
				alarmList: [],
				// 闹钟头标题
				AlarmHeader: [],
				// 装药格子数
				totalLoad: {
					title: "装药格子数",
					subtitle: "可选择0～28格",
					unit: "格",
					totalVal: 0,
					min: 0,
					max: 28,
					functions: `totalLoadChange`,
				},
				// 剩余格子数
				surplusCnt: {
					title: "剩余格子数",
					subtitle: "可选择0～28格",
					unit: "格",
					totalVal: 0,
					min: 0,
					max: 28,
					functions: `surplusCntChange`,
				},
				// 补药提醒周期
				alertCycle: {
					title: "补药提醒周期",
					subtitle: "可设置3/6/9天",
					unit: "天",
					totalVal: 3,
					min: 3,
					max: 9,
					step: 3,
					functions: `alertCycleChange`,
				},
				// 响铃持续时间
				ringTime: {
					title: "闹钟持续响铃时间",
					subtitle: "可设置5～60分钟",
					unit: "分钟",
					totalVal: 30,
					min: 5,
					max: 60,
					functions: `ringTimeChange`,
				},
				// 超时提醒时间
				overtimeNotice: {
					title: "服药超时提醒时间",
					subtitle: "可设置5～60分钟",
					unit: "分钟",
					totalVal: 30,
					min: 5,
					max: 60,
					functions: `overtimeNoticeChange`,
				},
				// 铃声大小
				bellVal: 0,
				// 铃声模式
				ringTypes: ['模式一', '模式二', '模式三'],
				ringIndex: 0,
				// 是否使用12小时制
				useTime12: false,
				// 开启微信订阅
				subscribeOvertime: false,
				// 补药提醒周期
				// alertCycleArr:['未设置','3','6','9'],
				// alertCycleArr: 2,
				showReboot: false,
				showFactoryReset: false,
				showloading: true,
				// #ifndef MP-WEIXIN
				notMP: true,
				// #endif
			}
		},
		computed: {
			getTintColor() {
				return this.tintColor;
			}
		},
		async onLoad(options) {
			// console.log("options", options);
			this.elderUUID = this.$route.query.uuid;
			await this.initTimeFormat();
			await this.initAlarm();
			console.log("是否使用12小时制", this.useTime12)
		},
		methods: {
			// 顶部导航切换
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				// 闹钟列表
				if (e.currentIndex === 0) {
					this.initAlarm();
					return
				}
				// 药品设置
				if (e.currentIndex === 1) {
					this.initPillboxSettings()
					return
				}
				// 其他设置
				if (e.currentIndex === 2) {
					this.initOtherSettings();
					return
				}
			},
			// 初始化闹钟
			async initAlarm() {
				this.alarmList = (await getAllAlarm(this.elderUUID, "alarm")).data
				console.log("this.alarmList", this.alarmList)
				this.alarmList.filter(res => {
					this.AlarmHeader.push(res.tp)
					res.isActive = (res.op == "on" ? true : false);
					// console.log(res.tm,"res.tm")
					let [h, m] = res.tm.split(":")
					// console.log("[h,m]",h,m)
					h = h < 10 ? h.substring(1) : h;
					if (this.useTime12) {
						// if (true) {
						// res.timeRange = h<12?"上午":"下午";
						const hf = h <= 12 ? h : h - 12;
						res.formatTime = hf + ":" + m;
						res.timeRange = h < 12 ? "AM" : "PM";
						console.log(res.formatTime, res.timeRange);
					} else {
						res.formatTime = h + ":" + m
						res.timeRange = '';
					}
				})
			},
			// 显示删除闹钟界面
			showDeleteAlarm(e) {
				this.showDelete = true;
				this.deleteMessage = "闹钟时间为：" + e.tm;
				this.deletedAlarm = e;
				console.log(e)
			},
			// 删除闹钟
			async deleteAlarm() {
				this.showDelete = false;
				const alarm = {
					tp: this.deletedAlarm.tp,
					da: this.deletedAlarm.da,
					oldManId: this.deletedAlarm.oldManId,
					op: "off",
					sta: "set",
					tm: this.deletedAlarm.tm,
					topic: this.deviceTopic
				}
				console.log("正在删除", alarm)
				uni.showLoading({
					title: '加载中...'
				});
				const res = await delPillBox(alarm);
				uni.hideLoading();
				this.alertIfError(res);
				await this.initAlarm()
			},
			// 初始化 药盒设置页面
			initPillboxSettings() {
				this.initTotalLoad()
				this.initSurplusCnt()
				this.initAlertCycle()
				this.initRingTime()
				this.initOverTime()
			},
			// 初始化 其他设置页面
			initOtherSettings() {
				this.initRingVolume() // 初始化 铃声大小
				this.initRingType() // 初始化 铃声模式
				this.initTimeFormat() // 初始化 时间格式
			},

			// 初始化 装药格子数
			initTotalLoad() {
				getPillBoxInfo(this.elderUUID, "total load").then(res => {
					if (res.data === undefined) return
					this.totalLoad.totalVal = res.data.da
				})
			},
			// 初始化 剩余格子数
			initSurplusCnt() {
				getPillBoxInfo(this.elderUUID, "surplus cnt").then(res => {
					if (res.data === undefined) return
					this.surplusCnt.totalVal = res.data.da
				})
			},
			// 获取 补药提醒周期
			initAlertCycle() {
				getPillBoxInfo(this.elderUUID, "alert cyle").then(res => {
					if (res.data === undefined) return
					this.alertCycle.totalVal = res.data.da
				})
			},
			// 获取 响铃持续时间
			initRingTime() {
				getPillBoxInfo(this.elderUUID, "keep time").then(res => {
					if (res.data === undefined) return
					this.ringTime.totalVal = res.data.da
				})
			},
			// 获取 超时提醒时间
			initOverTime() {
				getPillBoxInfo(this.elderUUID, "over time").then(res => {
					if (res.data === undefined) return
					this.overtimeNotice.totalVal = res.data.da
				})
			},
			// 初始化 铃声大小
			initRingVolume() {
				getPillBoxInfo(this.elderUUID, "ring volume").then(res => {
					// console.log("ring volume",res,res.data)
					if (res.data === undefined) return
					this.bellVal = res.data.da
				})
			},
			// 初始化 铃声模式
			initRingType() {
				getPillBoxInfo(this.elderUUID, "ring type").then(res => {
					if (res.data === undefined) return
					this.ringIndex = res.data.da - 1;
				})
			},
			// 初始化 时间格式
			initTimeFormat() {
				getPillBoxInfo(this.elderUUID, "tm format").then(res => {
					if (res.data === undefined) return
					if (res.data.da == "12") {
						this.useTime12 = true;
					} else {
						this.useTime12 = false;
					}
				})
			},
			// 改变铃声大小
			async bellChange(e) {
				this.bellVal = e.detail.value;
				const val = e.detail.value;
				let data = {
					tp: "ring volume",
					da: val,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
				await this.initRingVolume()
			},
			// 改变铃声模式
			async ringTypeChange(e) {
				this.ringIndex = e.detail.value;
				const da = this.ringIndex + 1
				console.log("修改铃声模式", da)
				let data = {
					tp: "ring type",
					da: da,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
				this.initRingType();
			},
			// 设置装药粒数
			async totalLoadChange(data) {
				const json = {
					tp: "total load",
					da: data,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(json)
				uni.hideLoading()
				this.alertIfError(res);
				this.initTotalLoad();
			},
			// 设置剩余格子数
			async surplusCntChange(data) {
				const json = {
					tp: "surplus cnt",
					da: data,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(json);
				uni.hideLoading();
				this.alertIfError(res);
				this.initSurplusCnt();
			},
			// 跳转至添加闹钟
			navigateToAddClock() {
				this.$tab.navigateTo(
					`/pages/homepage/PillBox/Clock/addClock?header=${JSON.stringify(this.AlarmHeader)}&&uuid=${this.elderUUID}`
				);
			},
			// 闹钟开关切换
			async alarmSwitch(alarm) {
				// 根据开关状态设置时间字体颜色
				if (alarm.isActive) {
					alarm.timeColor = '#090909';
					alarm.op = "on"
				} else {
					alarm.timeColor = '#a6a6a6';
					alarm.op = "off"
				}
				console.log(alarm);
				this.modifyAlarm(alarm);
			},
			formatDayList(dayList) {
				return dayList.join("，"); // 使用中文逗号分隔
			},
			getTimeStyle(isActive) {
				return {
					fontSize: '40px',
					fontWeight: 'bold',
					color: isActive ? '#090909' : '#a6a6a6',
				};
			},
			bindTimeChange(e, id) {
				// 遍历alarmList，找到匹配的alarm，并更新时间
				for (let i = 0; i < this.alarmList.length; i++) {
					if (this.alarmList[i].id === id) {
						this.alarmList[i].tm = e.detail.value;
						this.modifyAlarm(this.alarmList[i])
						break;
					}
				}
			},
			// 对闹钟修改发送请求
			async modifyAlarm(alarm) {
				// console.log("修改的闹钟", alarm)
				alarm.updateTime = null;
				alarm.createTime = null;
				alarm.sta = "set";
				alarm.topic = this.deviceTopic;
				// const data = {
				// 	tp: alarm.tp,
				// 	op: alarm.op,
				// 	da: alarm.da,
				// 	tm: alarm.tm,
				// 	sta: alarm.sta,
				// }
				console.log("修改闹钟发送", alarm)
				uni.showLoading({
					title: '加载中...'
				})
				const res = await setPillBox(alarm)
				uni.hideLoading();
				this.alertIfError(res);
				await this.initAlarm()
			},

			// 设置补药提醒周期
			async alertCycleChange(data) {
				console.log("设置补药提醒周期", this.alertCycle.totalVal, data)
				const json = {
					tp: "alert cyle",
					da: data,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				};
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(json);
				uni.hideLoading()
				this.alertIfError(res);
				this.initAlertCycle()
			},

			// 设置响铃时间
			async ringTimeChange(val) {
				console.log("设置响铃时间", this.ringTime.totalVal, val)
				let data = {
					tp: "keep time",
					da: val,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data);
				uni.hideLoading()
				this.alertIfError(res);
				this.initRingTime()
			},

			// 超时提醒时间
			async overtimeNoticeChange(val) {
				console.log("超时提醒时间", this.overtimeNotice.totalVal, val)
				let data = {
					tp: "over time",
					da: val,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
				this.initOverTime()
			},

			// 修改时间格式
			async changeTimeFormat() {
				const tmFormat = this.useTime12 ? '12' : '24';
				console.log("使用12小时制时间格式", this.useTime12, tmFormat)
				const data = {
					tp: "tm format",
					da: tmFormat,
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic,
				};
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
				this.initTimeFormat()
			},
			// 开启/关闭微信订阅
			toggleSubscribe() {
				// #ifndef MP-WEIXIN
				uni.showToast({
					icon:'none',
					title:"仅支持在微信小程序操作",
					duration:2000,
				})
				this.subscribeOvertime = !this.subscribeOvertime
				// #endif
				// #ifdef MP-WEIXIN
				// 用户正在订阅消息
				if (this.subscribeOvertime) {
					console.log("正在订阅", this.subscribeOvertime)
					// 检查用户是否登陆，检查是否已经获取code，检查否已经获取openid（应该在用户登陆时保存在vuex中）
					// ...
					// 用户登录，获取code
					const code = '';
					uni.login({
						provider: "weixin",
						success: function(res) {
							if (res.code) {
								console.log('登录成功 已获取code')
								// console.log(res.code) 
								code = res.code
								uni.showToast({
									title: "登陆成功",
									icon: "success",
									duration: 2000
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					});
					// 发送code给后端 获取openid
					const openid = '';
					getOpenID(code).then(res => {
						openid = res.msg;
						console.log(res, openid)
					});
					// 请求用户订阅
					uni.requestSubscribeMessage({
						tmplIds: ["uG51A36-5BlKidwn5ck0VG5XZrXBNIcuy_cJAi02RNg"],
						success: () => {
							uni.showToast({
								title: "订阅成功",
								icon: "success",
								duration: 2000
							})
						}
					});
					// 订阅成功后把数据返回后端
					const data = {
						openId: "",
						templateId: "uG51A36-5BlKidwn5ck0VG5XZrXBNIcuy_cJAi02RNg",
						oldManId: this.elderUUID,
						deviceType: "",
					}
					subscribeOvertimeNotice(data);
					return;
				}
				// 用户正在取消订阅 +++
				console.log("取消订阅", this.subscribeOvertime)
				// #endif
			},
			// 重启设备
			async rebootDevice() {
				console.log("重启设备")
				this.showReboot = false;
				let data = {
					tp: "dev reboot",
					da: "1",
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic,
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await setPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
			},
			// 恢复出产设置
			async factoryReset() {
				console.log("恢复出产设置")
				this.showFactoryReset = false;
				let data = {
					tp: "factory reset",
					da: "1",
					sta: "set",
					oldManId: this.elderUUID,
					topic: this.deviceTopic,
				}
				uni.showLoading({
					title: "加载中..."
				})
				const res = await factoryResetPillBox(data)
				uni.hideLoading()
				this.alertIfError(res);
			},
			// 操作失败时toast
			alertIfError(res) {
				if (res.code !== 200) {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: res.msg
					})
				}
			}
		}
	}
</script>

<style scoped>
	@import url(@/common/uni.css);

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;

	}

	.segmented-control-wrap {
		margin: 15rpx;
	}


	/* 固定底部按钮样式 */
	.fixed-button {
		position: fixed;
		bottom: 20px;
		/* 距离底部的距离 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 水平居中 */
		background-color: #505684;
		/* 背景颜色 */
		width: 60px;
		/* 按钮宽度 */
		height: 60px;
		/* 按钮高度 */
		border-radius: 50%;
		/* 使按钮变成圆形 */
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: box-shadow 0.3s;
		/* 添加过渡效果 */
		box-shadow: 5rpx 10rpx 10rpx rgba(156, 156, 156, 0.5);

	}

	/* 按钮悬停样式 */
	.fixed-button:hover {
		box-shadow: 0 4px 10px rgba(83, 83, 83, 0.5);
		/* 阴影效果 */
		background-color: #d8d8d8;
	}

	.day-list {
		font-size: 24rpx;
		color: #888;
		padding: 0 20rpx 20rpx;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	/* 样式可以根据需要进行美化 */
	.form-group {
		margin-bottom: 20px;
	}

	.success-message {
		color: green;
		margin-top: 10px;
	}



	.card-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		height: 60px;
		/* border-bottom: 1px solid #e0e0e0; */
	}

	.u-demo-block {
		display: flex;
		margin: 10px;

	}

	.u-demo-block__title {
		font-size: 18px;
		flex: 1;
	}

	.u-page__slide-item {
		flex: 4;
	}

	.time-container {
		width: 180px;
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
	}

	.time {
		font-size: 40px;
		font-weight: bold;
		color: #090909;
	}

	/* 清除灰色的“×”标志 */
	.switch-class::before {
		content: "" !important;
	}

	.settings {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		background-color: white;
		/* border: 1px solid red; */
	}

	/* 	.setting-bell,
	.setting-reset {
		width: 700rpx;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		padding: 5px 15px;
		background-color: white;
		border-bottom: 1px solid #eee;
	} */

	.setting-bell {
		width: 700rpx;
		/* height: 100px; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 6px 0px 6px 15px;
		border-bottom: 1px solid #eee;
		font-size: 15px;
	}

	.pill-setup {
		padding: 10px 20px 0;

	}

	.switch-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		padding: 6px 15px;
		background-color: white;
		border-bottom: 1px solid #eee;
	}

	.switch-card text {
		font-size: 15px;
		line-height: 2.2;
	}

	.pressed {
		background-color: #f8f8f8;
	}
</style>